// 父组件中
<template>
  <div style="width:100%">
    <div class="inline">
      <img src="../../../assets/children_parent.png" style="width:400px" />
    </div>
    <div class="inline" style="float:right;margin-right:24px">
      <div>我是父组件</div>
      <input v-model="msg" />

      <com-a style="margin-top:24px"></com-a>
      <button @click="changeChildren">点击改变子组件值</button>
    </div>

    <div class="inline">
      <ol style="width:50%">
        <li>
          上面这张图片是vue官方的解释，通过parent \ children就可以访问组件的实例，
          拿到实例代表可以访问此组件的所有方法和data。接下来就是怎么实现拿到指定组件的实例
        </li>
        <li>
          要注意边界情况，如在#app上拿 parent 得到的是 newValue 的实例，在这实例上在拿parent得到的是undefind，
          而在最底层的子组件拿children是个空数组，也要注意得到parent和children的值不一样，children 的值是
          <strong>数组</strong>，而$parent是个
          <strong>对象</strong>
        </li>
        <li>
          上面两种方式用于父子组件之间的通信， 而使用props进行父子组件通信更加普遍;
          二者皆不能用于非父子组件之间的通信。
        </li>
        <li>****注意：如果使用 iview 等组件，其内部的大部分组件都是当前页面的子组件，所以需要认真检查子组件的数量，保证方法指向正确***</li>
      </ol>
    </div>
  </div>
</template>
 
<script>
import ComA from "./children";
export default {
  components: { ComA },
  data() {
    return {
      msg: "我是父组件的值"
    };
  },

  methods: {
    changeChildren() {
      this.$children[0].message = "我是父组件改变子组件的之后值";
    }
  }
};
</script>
<style scoped>
button {
  background: #9646ff;
  border-radius: 5px;
  color: white;
  padding: 8px;
  border: 0;
}
input {
  padding: 8px;
  border-radius: 5px;
  border: 2px solid blue;
  width: 300px;
}
.inline {
  display: inline;
}
</style>